<!--
   线索管理（四中心）
 * @Author: hern
 * @Date: 2021-06-11 15:00:00
 * @project: 天津YQ平台
-->
<template>
    <div class="clue-szx-wrapper">
        <el-form ref="form" label-width="100px">
            <div class="table-filter table-filter-home">
                <div>
                    <el-form-item label="上报单位:">
                        <dg-tree-drop
                                v-model="sbrdwCode"
                                :code="BM_DEPT"
                                :check-strictly="true"
                                :props="props" lazy-load
                                filterable clearable
                                value-name="value"
                                label-name="label"
                                style="width: 100%"
                                multiple
                                collapse-tags
                                :cacheable="true"
                        ></dg-tree-drop>
                    </el-form-item>
                </div>
                <div>
                    <el-form-item label="上报时间段:">
                        <el-date-picker
                                v-model="time"
                                clearable
                                type="datetimerange"
                                value-format="yyyyMMddHHmmss"
                                format="yyyy-MM-dd HH:mm"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                :default-time="['00:00:00']"
                        />
                    </el-form-item>
                </div>
                <div>
                    <el-form-item label="关键词:">
                        <el-input v-model="condition.title.value" placeholder="标题" clearable/>
                    </el-form-item>
                </div>
                <div class="width-full">
                    <el-form-item label="指向时间:">
                        <div class="follow-flex-box">
                            <div>
                                <el-radio-group v-model="condition.zxlx.value">
                                    <el-radio v-for="(option, index) in zxsjOption" :key="index"
                                              :label="option.value">{{option.label}}
                                    </el-radio>
                                </el-radio-group>
                            </div>
                            <div class="m-l-2rem">
                                <el-date-picker
                                        v-model="timeZxsj"
                                        clearable
                                        type="datetimerange"
                                        value-format="yyyyMMddHHmmss"
                                        format="yyyy-MM-dd HH:mm"
                                        start-placeholder="开始日期"
                                        end-placeholder="结束日期"
                                        :default-time="['00:00:00']"
                                        :disabled="condition.zxlx.value !== '5'"
                                />
                            </div>
                        </div>
                    </el-form-item>
                </div>
                <div>
                    <el-form-item class="width-full" label="是否关注:">
                        <div class="check-box">
                            <el-checkbox :indeterminate="isImmerGz" v-model="checkAllGz" @change="onAllCheck()">
                                全选
                            </el-checkbox>
                            <el-checkbox-group v-model="checkedGZ"          
                                               @change="onEachCheck()">
                                <el-checkbox v-for="(gz_op, gz_index) in gzztOption" :key="gz_index"
                                             :label="gz_op.value">
                                    {{gz_op.label}}
                                </el-checkbox>
                            </el-checkbox-group>
                        </div>
                    </el-form-item>
                </div>
                <div></div>
                <div>
                    <el-form-item class="width-full operate-btns">
                        <el-button type="primary" size="mini" @click="() => $refs.table.searchForm()"> 查询</el-button>

                        <el-button size="mini" @click="reset">重置</el-button>
                    </el-form-item>
                </div>
            </div>
        </el-form>
        <div class="clue-szx-wrapper__list">
            <comm-table
                    ref="table"
                    :condition="condition"
                    :columns="columns"
                    url="v1/fourconter/search"
                    :pageSize="pageSize"
                    :defaultSort="{
                        prop: 'zxsj',
                        order: 'descending'}">
                <template slot-scope="{ row }">
                    <div>
                        <el-button v-permission="['SZHX_GZ']"
                                   type="text"
                                   @click="clickToFollow(row)">
                            关注
                        </el-button>
                    </div>
                </template>
            </comm-table>
        </div>
    </div>
</template>
<script>
    import {mapState} from 'vuex';
    import {queryCurrentEncryptSfzh} from '@/api/common';
    const {getSetting} = window.systemParamsUtils;
    import {BM_DEPT, BM_ZXLX} from '@/common/codeDic';
    import {deepClone} from "@/utils/common";
    import { formatDateStr } from './data-process';

    export default {
        name: 'ClueSignFeedback',
        components: {},
        props: {},
        data() {
            return {
                columns: [
                    {label: '序号', type: 'index'},
                    {
                        label: '标题',
                        prop: 'title',
                        render: (h, row) => {
                            let that_ = this;
                            return h(
                                'div',
                                {
                                    class: 'table-title',
                                    on: {
                                        click() {
                                            let url = getSetting("CLUE_DETAIL_SZX_URL");
                                            let sfzh = that_.$store.state && that_.$store.state.user.info ?
                                                that_.$store.state.user.info.idCard : '';

                                            if (!url || !sfzh) {
                                                return;
                                            }

                                            queryCurrentEncryptSfzh().then(res => {
                                                url = url.replace(/{id}/g, row.id);
                                                url = url.replace(/{sfzh}/g, res.data);
                                                window.open(url, '_blank');
                                            })
                                        }
                                    }
                                },
                                [
                                    h('span', {class: 'v-link'}, row.title)
                                ]
                            );
                        }
                    },
                    {
                        label: '上报单位',
                        prop: 'createOrgCode',
                        code: BM_DEPT,
                        width: 230
                    },
                    {
                        label: '指向时间',
                        prop: 'zxsj',
                        render: (h, row) => {
                            let that_ = this;
                            // 初始化指向时间

                            return h(
                                'div',
                                {
                                    class: 'table-title szx-list-wrap'
                                },
                                [
                                    h('span', {class: ''}, that_.filterZxlx(row.zxlx)),
                                    !_.isEmpty(row.zxsj) ? formatDateStr(row.zxsj, 'yyyy-MM-dd HH:mm:ss') : '-'
                                ]
                            );
                        },
                        width: 180
                    },
                    {
                        label: '是否关注', prop: 'sfgz',
                        render: (h, row) => {
                            return h(
                                'span',
                                { style: { color: row.sfgz === '0' ? '#f5212d' : '#67c23a' } },
                                [row.sfgz === '0' ? '未关注' : '已关注']
                            );
                        },
                        width: 100
                    },
                    {label: '操作', type: 'operate', width: 200}
                ],
                pageSize: 8,
                BM_DEPT,
                BM_ZXLX,
                sbrdwCode: [],
                props: {
                    value: "value"
                },
                // 列表查询条件
                condition: {
                    createOrgCode: {
                        value: '',
                        op: '='
                    },
                    createTime: {
                        value: [],
                        op: 'rangeDate'
                    },
                    zxlx: {  // 近一天
                        value: '',
                        op: '='
                    },
                    zxsj: {  // 自定义时间
                        value: '',
                        op: 'rangeDate'
                    },
                    sfgz: {
                        value: '',
                        op: 'in'
                    },
                    title: {
                        value: '',
                        op: 'like'
                    }
                },
                cloneCondition: null,
                time: '',
                timeZxsj: '',
                gzztOption: [
                    {
                        label: '已关注',
                        value: '1'
                    }, {
                        label: '未关注',
                        value: '0'
                    }
                ],
                checkedGZ: [],
                isImmerGz: false,
                checkAllGz: false
            }
        },
        computed: {
            ...mapState(['constant']),
            zxsjOption(){
                let result = [];

                if (!_.isEmpty(this.constant[this.BM_ZXLX])){
                    result = this.constant[this.BM_ZXLX];
                }

                return result;
            },
            zxlxMap(){
                let result = {};

                if (!_.isEmpty(this.zxsjOption)){
                    this.zxsjOption.forEach(item => {
                        result[item['value']] = item['label'];
                    });
                }

                return result;
            }
        },
        created() {
            this.$store.dispatch('getConstant', ['BM_ZXLX']);
            this.$store.dispatch('getConstantTree', ['BM_DEPT']);
            this.cloneCondition = deepClone(this.condition);
        },
        methods: {
            /**
             * 格式化只想类型
             */
            filterZxlx(value) {
                let result = '';
                result = this.zxlxMap[value] || '';
                return result;
            },
            /**
             * 重置
             */
            reset() {
                this.time = null;
                this.timeZxsj = null;
                this.isImmerGz = false;
                this.checkAllGz = false;
                this.sbrdwCode = []
                this.checkedGZ = [];
                this.condition = deepClone(this.cloneCondition);
                this.$nextTick(() => {
                    this.$refs.table.searchForm();
                });
            },
            /**
             * 关注
             */
            clickToFollow(row) {
                let that_ = this;
                // 打开关注弹窗
                let layers = this.$dgLayer({
                    title: '关注',
                    shade: 0,
                    content: require('./layers/follow'),
                    props: {
                        clueId: row.id
                    },
                    on: {
                        success(params) {
                            // 关闭对应弹窗的ID
                            layers.close(layers.dialogIndex);
                            // 刷新列表
                            that_.$nextTick(() => {
                                that_.$refs.table.searchForm();
                            });
                        }
                    },
                    close() {
                        // 关闭对应弹窗的ID
                        layers.close(layers.dialogIndex);
                        return false;
                    },
                    area: ['850px', '360px']
                });
            },
            onAllCheck() {
                if (this.gzztOption.length === this['checkedGZ'].length) {
                    this['checkedGZ'] = [];
                } else {
                    this['checkedGZ'] = this.gzztOption.map((v) => v.value);
                }
            },
            onEachCheck() {
                if (this['checkedGZ'].length && this['checkedGZ'].length < this.gzztOption.length) {
                    this['isImmerGz'] = true;
                } else {
                    this['checkAllGz'] = this.gzztOption.length === this['checkedGZ'].length;
                    this['isImmerGz'] = false;
                }
            }
        },
        watch: {
            checkedGZ(val) {
                this.condition.sfgz.value = val.map((v) => v).join();
            },
            sbrdwCode(val) {
                this.condition.createOrgCode.value = val.length ? val : '';
            },
            time(val) {
                this.condition.createTime.value = val ? [val[0],val[1]] : [];
            },
            timeZxsj(val){
                this.condition.zxsj.value = val ? [val[0],val[1]] : [];
            }
        }
    };
</script>

<style lang="scss">
    .clue-szx-wrapper {
        display: flex;
        flex-direction: column;
        overflow: hidden;

        .table-filter {

        }

        .check-box {
            display: flex;

            /deep/ .checkbox-group {
                text-align: left;
            }

            /deep/ .el-checkbox {
                margin-right: 6px;
            }
        }

        .width-full {
            width: 100%;
        }

        .operate-btns {
            > div {
                text-align: right;
            }
        }

        &__list {
            flex-shrink: 1;
            flex-grow: 1;
            margin-top: 10px;
            background-color: #fff;
            padding: 1.5rem 2rem;
        }

        .szx-list-wrap {
            flex-direction: column;
            align-items: start;
        }
    }

    .follow-flex-box {
        display: flex;
        .m-l-2rem {
            margin-left: 2rem;
        }
    }
</style>